<template>
	<section class="main">
		<header-bar>
			<span slot="titleName">{{titleName}}</span>
		</header-bar>
		<aside class="contain">
			<div class="left">
				<side-bar></side-bar>
			</div>
			<aside class="right">
				<router-view  @getTitle="toTtitle"></router-view>
				<footer-bar></footer-bar>
			</aside>
		</aside>

	</section>


</template>

<script>
	import headerBar from "@/layout/header2"
	import sideBar from "@/layout/sidebar"
	import footerBar from "@/layout/footer"
	export default{
		components:{
			headerBar,
			sideBar,
			footerBar
		},
		data (){
			return {
				titleName:"",
			}
		},
		created (){
		},
		methods:{
			//获取到heder上面的title的值
			toTtitle(title){
				this.titleName=title;
			},

		}
	}
</script>

<style scoped>
	.main{
		width:100%;
		height:100%;
		background: #eaecef;
		position:relative;
	}
	.contain{
		width: 100%;
		height:100%;
		overflow: auto;
		padding-top: 4rem;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
	}
	.left{
		width:240px;
		height:100%;
		overflow-x: hidden;
		overflow-y: auto;
		background: #d8dce3;
	}
	.right{
		flex:1;
		overflow-x: hidden;
    overflow-y: auto;
		position:relative;
		display: flex;
		flex-direction: column;
		/*padding-bottom:4.5rem ;*/
	}
	.right >>> #footer{
		color: #333333;
		background: #eaecef;
		/*position: absolute;
		left:0px;
		right:0px;
		bottom:0px;
		background: #;*/
	}
	@media only screen and (min-width: 320px) and (max-width:959px) {
    .main{
      height: auto;
    }
		.left{
			display: none;
		}
    .contain{
      display: block;
      height: auto;
    }
    .right{
      display: block;
      height: auto;
    }
	}
	@media only screen and (min-width:960px) {
		.left{
			display: block;
		}
	}
</style>
